import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { Search24 as SearchIcon } from '@carbon/icons-react';
import { withRouter } from 'react-router';
import Select, { Option } from '@kuiper-components/select';
import Input from '@kuiper-components/input';
import Button from '@kuiper-components/button';
import DateRange from '../../../../components/DateRange';
import s from './style.module.css';
import fetch from 'API/fetch';

function Toolbox({ className, value, reSearch }) {
	const [vulnName, setAffectsSearch] = React.useState(value.vuln_name);
	const [vulnPeriod, setDateTime] = React.useState({
		startTime: '',
		endTime: '',
	});
	const [vulnType, setSelectData] = React.useState();
	const [optionData, setOptionData] = React.useState([]);

	async function getData() {
		const res = await fetch('/api/v2/vulndb/get_vuln_type', {
			method: 'GET',
		}).catch(e => {
			return {};
		});
		if (res.code === 200) {
			setOptionData(res.results.vuln_type);
		}
	}

	React.useEffect(() => {
		getData();
	}, []);

	const handleDateChange = val => {
		setDateTime(val);
	};
	const handleAffectsChange = val => {
		setAffectsSearch(val);
	};
	const handleSelectCommit = val => {
		setSelectData(val);
	};
	const handleReset = () => {
		setDateTime({
			startTime: '',
			endTime: '',
		});
		setAffectsSearch('');
		setSelectData();
		reSearch({
			vuln_name: null,
			vuln_period: {
				startTime: '',
				endTime: '',
			},
			vuln_type: null,
		});
	};
	const getSearchData = () => {
		if (vulnPeriod.startTime || vulnPeriod.endTime) {
			// 默认60天
			vulnPeriod.startTime = vulnPeriod.startTime
				? vulnPeriod.startTime
				: new Date(Date.now() - 1000 * 60 * 60 * 24 * 60);
			vulnPeriod.endTime = vulnPeriod.endTime ? vulnPeriod.endTime : new Date();
		}
		reSearch({
			vuln_name: vulnName,
			vuln_period: vulnPeriod,
			vuln_type: vulnType,
		});
	};
	return (
		<div className={cn(className, s.toolbox)}>
			<Input
				onChange={handleAffectsChange}
				className={s.input}
				placeholder="请输入漏洞名称"
				after={<SearchIcon className={s.icon} onClick={getSearchData} />}
				value={vulnName}
				onPressEnter={getSearchData}
				type="search"
			/>
			<div className={s.selectContainer}>
				<Select
					placeholder="漏洞类型"
					className={s.item}
					value={vulnType}
					onChange={handleSelectCommit}
				>
					{/* <option value="" disabled selected>
						漏洞类型
					</option> */}
					{optionData.map(n => (
						<Option key={n} value={n}>
							{n}
						</Option>
					))}
				</Select>
				<DateRange
					name="dateRange"
					value={vulnPeriod}
					className={s.dateRange}
					onChange={handleDateChange}
				/>
				<Button className={s.btn} primary onClick={getSearchData}>
					查询
				</Button>
				<Button className={s.btn} onClick={handleReset}>
					重置
				</Button>
			</div>
		</div>
	);
}

Toolbox.propTypes = {
	className: PropTypes.string,
	value: PropTypes.object,
	reSearch: PropTypes.func.isRequired,
};
Toolbox.defaultProps = {
	className: '',
};

export default withRouter(Toolbox);
